<template>
	<div class="recommend" ref="recommend">
		<scroll class="recommend-content" :data="discList" ref="scroll">
			<div>
				<div v-if="recommends.length" class="slider-wrapper">
					<slider>
						<div v-for="item in recommends">
							<a :href="item.linkUrl">
								<img @load="loadImage" class="needsclick" :src="item.picUrl" />
							</a>
						</div>
					</slider>
				</div>
				<div class="recommend-list">
					<h1 class="list-title">热门歌单推荐</h1>
					<ul>
						<li @click="selectItem(item)" v-for="item in discList" class="item">
							<div class="icon">
								<img v-lazy="item.imgurl" width="60" height="60">
							</div>
							<div class="text">
								<h2 class="name" v-html="item.creator.name"></h2>
								<p class="desc" v-html="item.dissname"></p>
							</div>
						</li>
					</ul>
				</div>
			</div>
			<div class="loading-container" v-show="!discList.length">
				<loading></loading>
			</div>
		</scroll>
		<router-view></router-view>
	</div>
</template>

<script>
	import Scroll from '@/base/scroll/scroll'
	import Loading from '@/base/loading/loading'
	import Slider from '@/base/slider/slider'
	import { getRecommend, getDiscList } from '@/api/recommend'
	import { ERR_OK } from '@/api/config'
	import { playlistMixin } from '@/common/js/mixin'
	import { mapMutations } from 'vuex'

	// import axios from 'axios'


	export default {
		mixins: [playlistMixin],
		data () {
			// 推荐数据： 默认为空
			return {
				recommends: [],
				// 歌单列表
				discList: []
			}
		},
		// 获取数据
		created() {
			this._getRecommend()
			// 获取歌单列表
			this._getDiscList()
		},
		methods: {
			handlePlaylist (playlist) {
				const bottom = playlist.length > 0 ? '60px' : ''
				this.$refs.recommend.style.bottom = bottom
				this.$refs.scroll.refresh()
			},
			selectItem(item) {
				this.$router.push({
					path:  `/recommend/${item.dissid}`
				})
				this.setDisc(item)
			},
			_getRecommend() {
				getRecommend().then((res) => {
					if (res.code ===ERR_OK) {
						this.recommends = res.data.slider
						// console.log(res.data.slider);
					}
				})
			},
			_getDiscList() {
				getDiscList().then((res) => {
					if (res.code ===ERR_OK) {
						this.discList = res.data.list
						// console.log(res.data.list);
					}
				})
			},
			loadImage() {
				// 做一个标志位，确定该逻辑执行一次
				if (!this.checkLoaded) {
					this.$refs.scroll.refresh()
					this.checkLoaded = true
				}
			},
			...mapMutations({
				setDisc: 'SET_DISC'
			})
		},
		// 注册组件
		components: {
			Slider,
			Scroll,
			Loading
		}
	}
</script>

<style lang="stylus" scoped>
	@import '~common/stylus/variable'
	
	.recommend
		position: fixed
		width: 100%
		top: 88px
		bottom: 0
		.recommend-content
			height: 100%
			overflow: hidden
			.slider-wrapper
				position: relative
				width: 100%
				overflow: hidden
			.recommend-list
				.list-title
					height: 65px
					line-height: 65px
					text-align: center
					font-size: $font-size-medium
					color: $color-theme
				.item
					display: flex
					box-sizing: border-box
					align-items: center
					padding: 0 20px 20px 20px
					.icon
						flex: 0 0 60px
						width: 60px
						padding-right: 20px
					.text
						display: flex
						flex-direction: column
						justify-content: center
						flex: 1
						line-height: 20px
						overflow: hidden
						font-size: $font-size-medium
						.name
							margin-bottom: 10px
							color: $color-text
						.desc
							color: $color-text-d
			.loading-container
				position: absolute
				width: 100%
				top: 50%
				transform: translateY(-50%)

</style>